<template>
  <div id="app">
    <el-container>
      <!--抬头开始-->
      <el-header>
        <div class="center">
          <el-row gutter="10">
            <el-col span="6">
              <img src="http://rww08uahf.hn-bkt.clouddn.com/964a0f20e41b4303959890fe8c2231be.png" width="196" height="65" >
            </el-col>
            <el-col span="10">
              <h1s style="font-size: 30px;color: dimgray;position: relative;top: 10px">后台管理中心</h1s>
            </el-col>
            <el-col span="6">
              <el-input style="margin-top: 10px;position: relative;right: 100px" placeholder="请输入搜索的关键字">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-col>
            <el-col span="2">
              <el-popover
                  placement="top-start"
                  title="欢迎来到kun吧"
                  width="200"

                  trigger="hover"
                  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                <div slot="reference">
                  <i class="el-icon-user" style="font-size: 30px;position: relative;margin:15px 15px 0 20px;"></i>
                </div>
                <el-button type="info"> <a href="reg.html" style="color: white;text-decoration: none">注册</a></el-button>
                <el-button style="background-color: #3c32fb;color: white"><a href="login.html" style="color: white;text-decoration: none">登录</a></el-button>
              </el-popover>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-divider></el-divider>
      <!--抬头结束-->
      <el-main style="margin-top: 100px;position: absolute">
        <div style="margin: 0 auto">
          <el-row gutter="10">
            <el-col span="24">
              <div style="width: 1500px;height: 600px;position: relative;bottom:20px;right: 10px" >
                <el-tabs style="background-color:white;height: 600px;" type="card">
                  <!--用户管理开始-->
                  <el-tab-pane label="用户管理"
                               @tab-click="selectAllUser()"
                  ><template>
                    <template>
                      <el-button @click="selectAllUser()" type="info"
                                 plain style=" border-radius: 0;margin-left: 20px">全部</el-button>
                      <el-input style="width: 200px;margin-left: 20px" placeholder="请输入搜索的关键字"
                                v-model="keyword">
                        <el-button slot="append" icon="el-icon-search"
                                   @click="selectUserByKeyword(keyword)"
                        ></el-button>
                      </el-input>
                      <el-table
                          :data="tableUserData"
                          tooltip-effect="light"
                          style="width: 100%"
                          height="483"
                      >
                        <el-table-column
                            type="index"
                            label="序号"
                            width="50">
                        </el-table-column>
                        <el-table-column
                            prop="avatar"
                            label="头像"
                            width="80"
                            align="center"
                        ><template slot-scope="scope">
                          <img :src='scope.row.avatar' style="border-radius: 100px" width="40px" alt="">
                        </template>
                        </el-table-column>
                        <el-table-column
                            prop="nickname"
                            label="昵称"
                            width="100"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="phoneNumber"
                            label="电话号码"
                            width="120"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="birthday"
                            label="生日"
                            width="120"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="state"
                            label="状态"
                            width="50"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="described"
                            label="个性签名"
                            width="200"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="level"
                            label="等级"
                            width="50"
                        >
                        </el-table-column>
                        <el-table-column
                            label="地区"
                            prop="area"
                            width="60"
                        >
                        </el-table-column>

                        <el-table-column
                            prop="createTime"
                            label="创建时间"
                            width="220"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button type="danger" @click="deleteUserById(scope.row.id)"
                                       icon="el-icon-delete" size="medium"
                                       circle="true"></el-button>
                            <el-button type="info"
                                       size="mini"
                                       @click="selectUserById(scope.row.id)">详情</el-button>
                          </template>
                        </el-table-column>

                      </el-table>
                      <div style="margin-top: 20px">
                        <el-button type="text" style="float: right;margin-right: 50px"
                        ><a href="index.html">返回首页</a></el-button>

                      </div>
                    </template>
                  </template></el-tab-pane>
                  <!-- 用户管理结束-->
                  <!--博客管理开始-->
                  <el-tab-pane label="博客管理"><template>
                    <el-button @click="selectAllBlog()" type="info" style="border-radius: 0;margin-left: 20px;
                                                    " plain>全部</el-button>
                    <el-input v-model="keyword" style="width: 200px;margin-left: 20px" placeholder="请输入搜索的关键字">
                      <el-button slot="append" icon="el-icon-search" @click="selectBlogByKeyword(keyword)"></el-button>
                    </el-input>
                    <el-table
                        ref="multipleTable"
                        :data="this.tableBlogData"
                        tooltip-effect="dark"
                        style="width: 100%;"
                        @selection-change="handleSelectionChange"
                        height="483">
                      <el-table-column
                          type="index"
                          label="序号"
                          width="50">
                      </el-table-column>
                      <el-table-column
                          label="用户Id"
                          prop="userId"
                          width="120">
                      </el-table-column>
                      <el-table-column
                          label="博客id"
                          prop="id"
                          width="120">
                      </el-table-column>
                      <el-table-column
                          prop="blogTitle"
                          label="博客标题"
                          width="120">
                      </el-table-column>
                      <el-table-column
                          prop="blogContent"
                          label="博客内容"
                          width="120">
                      </el-table-column>
                      <el-table-column
                          prop="blogTypeId"
                          label="博客类型"
                          width="120">
                      </el-table-column>
                      <el-table-column
                          prop="blogCreateTime"
                          label="博客发布时间"
                          show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button type="danger" @click="deleteBlogById(scope.row.id)"
                                     icon="el-icon-delete" size="medium"
                                     circle="true"></el-button>
                          <el-button type="info"
                                     size="mini"
                                     @click="selectBlogById(scope.row.id)">博客详情</el-button>
                          <el-button type="info" size="mini"
                                     @click="selectAllReplyByBlogId(scope.row.id)"> 评论管理</el-button>
                          <el-dialog title="评论管理" :visible.sync="dialogTableVisible"
                                     width="1100px" top="80px" center="true" >
                            <!--评论管理开始-->
                            <el-table
                                ref="multipleTable"
                                :data="tableReplyData"
                                tooltip-effect="dark"
                                style="width: 100%;"
                                @selection-change="handleSelectionChange"
                                height="500">
                              <el-table-column
                                  type="index"
                                  label="序号"
                                  width="50">
                              </el-table-column>
                              <el-table-column
                                  prop="id"
                                  label="ID"
                                  width="120">
                              </el-table-column>
                              <el-table-column
                                  prop="userId"
                                  label="用户Id"
                                  width="120">
                              </el-table-column>
                              <el-table-column
                                  prop="blogId"
                                  label="博客ID"
                                  width="120">
                              </el-table-column>
                              <el-table-column
                                  prop="parentId"
                                  label="parentID"
                                  width="120">
                              </el-table-column>
                              <el-table-column
                                  prop="content"
                                  label="内容"
                                  width="120">
                              </el-table-column>
                              <el-table-column
                                  prop="replyCreateTime"
                                  label="发布时间"
                                  show-overflow-tooltip>
                              </el-table-column>
                              <el-table-column label="操作">
                                <template slot-scope="scope">
                                  <el-button type="danger" @click="deleteReplyById(scope.row)"
                                             icon="el-icon-delete" size="medium"
                                             circle="true"></el-button>
                                </template>
                              </el-table-column>
                            </el-table>
                          </el-dialog>
                          <!--评论管理结束-->
                        </template>
                      </el-table-column>
                    </el-table>
                    <div style="margin-top: 20px">
                      <el-button type="text" style="float: right;margin-right: 50px"
                      ><a href="index.html">返回首页</a></el-button>
                    </div>
                  </template>
                  </el-tab-pane>
                  <!--博客管理结束-->
                  <!--活动管理开始-->
                  <el-tab-pane label="活动管理">
                    <el-button @click="selectEvent()" type="info" style="border-radius: 0;margin-left: 20px;
                                                    " plain>全部</el-button>
                    <el-button @click="dialogFormVisible=true" type="info" style="border-radius: 0;margin-left: 20px;
                                                    " plain>新建</el-button>
                    <el-dialog title="新建活动" :visible.sync="dialogFormVisible"
                               width="800px" top="80px" center="true" >
                      <!--新建活动开始-->
                      <el-form :model="newEventForm" :rules="rules" ref="newEventForm" label-width="100px">
                        <el-form-item label="开始时间" prop="startTime">
                          <div class="block">
                            <el-date-picker
                                v-model="newEventForm.startTime"
                                type="datetime"
                                style="width: 400px"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择日期时间">
                            </el-date-picker>
                          </div>
                        </el-form-item>
                        <el-form-item label="结束时间" prop="endTime">
                          <div class="block">
                            <el-date-picker
                                style="width: 400px"
                                v-model="newEventForm.endTime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择日期时间">
                            </el-date-picker>
                          </div>
                        </el-form-item>
                        <el-form-item label="库存量" prop="inv">
                          <el-input v-model.number="newEventForm.inv" style="width: 400px" ></el-input>
                        </el-form-item>
                        <el-form-item label="活动介绍" prop="introduce">
                          <el-input v-model="newEventForm.introduce" style="width: 600px" ></el-input>
                        </el-form-item>
                        <el-form-item label="积分数量" prop="eachNumber">
                          <el-input v-model.number="newEventForm.eachNumber" style="width: 400px" ></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="createNewEvent('newEventForm')"
                                     style="margin-left: 200px"
                          >立即创建</el-button>
                        </el-form-item>
                      </el-form>
                    </el-dialog>
                    <!--新建活动结束-->
                    <el-input v-model="keyword" style="width: 200px;margin-left: 20px" placeholder="请输入搜索的关键字">
                      <el-button slot="append" icon="el-icon-search" @click="selectBlogByKeyword(keyword)"></el-button>
                    </el-input>
                    <el-table
                        ref="multipleTable"
                        :data="tableIntegralData"
                        tooltip-effect="dark"
                        style="width: 100%;"
                        height="483">
                      <el-table-column
                          type="index"
                          label="序号"
                          width="50">
                      </el-table-column>
                      <el-table-column
                          prop="id"
                          label="ID"
                          width="80">
                      </el-table-column>
                      <el-table-column
                          prop="startTime"
                          label="开始时间"
                          width="150">
                      </el-table-column>
                      <el-table-column
                          prop="endTime"
                          label="结束时间"
                          width="150">
                      </el-table-column>
                      <el-table-column
                          prop="inv"
                          label="库存"
                          width="100">
                      </el-table-column>
                      <el-table-column
                          prop="introduce"
                          label="介绍"
                          width="300">
                      </el-table-column>
                      <el-table-column
                          prop="eachNumber"
                          label="积分"
                          width="100"
                          show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button type="danger" @click="deleteEvent(scope.row.id)"
                                     icon="el-icon-delete" size="medium"
                                     circle="true"></el-button>
                          <el-button type="info" @click="updateEventId(scope.row)"
                                     icon="el-icon-edit" size="medium"
                                     circle="true">
                          </el-button>
                          <!--更新活动开始--><!--更新活动结束-->
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>

                  <!--设备状态开始-->
                  <el-tab-pane label="设备状态">
                    <el-row :gutter="20">
                      <el-col :span="8">
                        <el-card style="width: 600px;margin-left: 100px" shadow="always">
                          <el-descriptions title="cpu" column="1" border="true">
                            <el-descriptions-item label="核心数">{{ this.cpuData.c1 }}</el-descriptions-item>
                            <el-descriptions-item label="用户使用率">{{ this.cpuData.c2 }}</el-descriptions-item>
                            <el-descriptions-item label="系统使用率">{{ this.cpuData.c3 }}</el-descriptions-item>
                            <el-descriptions-item label="当前空闲率">{{ this.cpuData.c4 }}</el-descriptions-item>
                          </el-descriptions>
                        </el-card>
                      </el-col>
                      <el-col :span="10">
                        <el-card style="width: 600px;margin-left: 250px" shadow="always">
                          <el-descriptions title="内存" column="1" border>
                            <el-descriptions-item label="总内存">{{this.memoryData.m1}}</el-descriptions-item>
                            <el-descriptions-item label="已用内存">{{this.memoryData.m2}}</el-descriptions-item>
                            <el-descriptions-item label="剩余内存">{{this.memoryData.m3}}</el-descriptions-item>
                            <el-descriptions-item label="使用率">{{this.memoryData.m4}}</el-descriptions-item>
                          </el-descriptions>
                        </el-card>
                      </el-col>
                    </el-row>
                    <el-row :gutter="10">
                      <el-col :span="8"><el-card style="width: 1255px;margin-left: 100px;margin-top: 25px" shadow="always">
                        <el-descriptions title="服务器信息" column="2" border>
                          <el-descriptions-item label="服务器名称">{{ this.serverData.s1 }}</el-descriptions-item>
                          <el-descriptions-item label="操作系统">{{ this.serverData.s2 }}</el-descriptions-item>
                          <el-descriptions-item label="服务器IP">{{ this.serverData.s3}}</el-descriptions-item>
                          <el-descriptions-item label="系统架构">{{ this.serverData.s4 }}</el-descriptions-item>
                        </el-descriptions>
                      </el-card></el-col>
                    </el-row>
                    <el-row :gutter="10">
                      <el-col :span="8"><el-card style="width: 1255px;margin-left: 100px;margin-top: 25px" shadow="always">
                        <el-descriptions title="java虚拟机信息" column="2" border>
                          <el-descriptions-item label="java名称">{{ this.javaJVMData.ja1 }}</el-descriptions-item>
                          <el-descriptions-item label="java版本">{{this.javaJVMData.ja2  }}</el-descriptions-item>
                          <el-descriptions-item label="运行时长">{{ this.javaJVMData.ja3 }}</el-descriptions-item>
                          <el-descriptions-item label="启动时间">{{ this.javaJVMData.ja4 }}</el-descriptions-item>
                          <el-descriptions-item label="安装路径">{{ this.javaJVMData.ja5  }}</el-descriptions-item>
                          <el-descriptions-item label="运行参数">{{ this.javaJVMData.ja6 }}</el-descriptions-item>
                        </el-descriptions>
                      </el-card></el-col>
                    </el-row>

                    <el-row :gutter="10">
                      <el-col :span="8"><el-card style="width: 1255px;margin-left: 100px;margin-top: 25px" shadow="always">
                        <el-descriptions title="磁盘状态" direction="vertical" :column="7" border>
                          <el-descriptions-item label="盘符路径">{{ this.diskData.d1 }}</el-descriptions-item>
                          <el-descriptions-item label="文件系统">{{ this.diskData.d2 }}</el-descriptions-item>
                          <el-descriptions-item label="盘符类型">{{ this.diskData.d3 }}</el-descriptions-item>
                          <el-descriptions-item label="总大小">{{ this.diskData.d4 }}</el-descriptions-item>
                          <el-descriptions-item label="可用大小">{{ this.diskData.d5 }}</el-descriptions-item>
                          <el-descriptions-item label="已用大小">{{ this.diskData.d6 }}</el-descriptions-item>
                          <el-descriptions-item label="已用百分比">{{ this.diskData.d7}}</el-descriptions-item>
                        </el-descriptions>
                      </el-card></el-col>
                    </el-row>
                  </el-tab-pane>
                  <!--设备状态结束-->
                </el-tabs>

              </div>
            </el-col>

          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>


<script>
import {number} from "@/views/put/edit/js/echarts";
import axios from "axios";

export default {

  data: function () {
    return {
      diskData:{d1:'/',d2:'ext4',d3:'/',d4:'39.2G',d5:'28.7G',d6:'10.5G',d7:'26.18%'},
      javaJVMData:{ja1:'jdk1.8',ja2:'1.8._111',ja3:'03小时27分钟',ja4:'"D:\\my study\\Git"',ja5:'"D:\\my study\\Git"',ja6:'123456878'},
      JVMData:{j1:'564M',j2:'332M',j3:'34M',j4:'343M'},
      serverData:{s1:'一台很贵的 电脑',s2:'Linux',s3:'localhost',s4:'amo064'},
      cpuData:{c1:'8',c2:'15%',c3:'56%',c4:'70%'},
      memoryData:{m1:'8G',m2:'2.45G',m3:'6.55G',m4:'70%'},
      keyword:"",
      checked: "",
      tabPosition: 'left',
      img:'',
      rules:{
        startTime:[ { type: 'string', required: true, message: '请选择开始时间', trigger: 'change' }],
        endTime:[ { type: 'string', required: true, message: '请选择结束时间', trigger: 'change' }],
        inv:[{  required: true, message: '请输入库存', trigger: 'blur' },
          {type: 'number',message: '库存格式错误',trigger: 'blur' }],
        introduce:[{required: true, message: '请输入活动内容',trigger:'blur'},
          {min:3,max:20,message: '长度在3到20个字符以内',trigger: 'blur'}
        ],
        eachNumber:[{ required: true, message: '请输入积分数量', trigger: 'blur' },
          {type: 'number',message: '积分数量格式错误',trigger: 'blur' }]
      },
      tableBlogData: [],
      tableUserData: [],
      tableReplyData:[],
      tableIntegralData:[],
      eventObj:{id:'',startTime:'',endTime:'',inv:'',introduce: '',eachNumber:''},
      newEventForm:{startTime:'',endTime:'',inv:'',introduce: '',eachNumber:''},
      dialogTableVisible:false,
      dialogFormVisible:false,
      input:"",
    }
  },
  methods: {
    /*更新活动的记录赋值*/
    updateEventId(obj){
    },
    /*更新活动*/
    updateEvent(updateEventForm){
    },
    /*重置表单*/
    resetForm(newEventForm){
      this.$refs[newEventForm].resetFields();
    },
    /*创建新的活动*/
    createNewEvent(newEventForm){

      this.$refs[newEventForm].validate((valid) => {
        if (valid) {
          alert(this.newEventForm.inv)
          let url = 'http://localhost:8088/userIntegral/add'
          this.axios.post(url,this.newEventForm).then((response)=>{
            if (response.data.code===1){
              this.$message.success("添加成功")
              this.resetForm(newEventForm)
              this.selectEvent();
            }
            else this.$message.error("添加失败");
          })
        } else {
          this.$message.warning("错误，请重新输入")
          this.resetForm(newEventForm)
          return false;
        }
      });
    },
    /*删除某一活动*/
    deleteEvent(id){
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url='http://localhost:8088/userIntegral/deleteById/'
        this.axios.delete(url+id).then( (response)=>{
          if (response.data.code===1){
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.selectEvent();
          }
        })
      }).catch(() => {
      });
    },
    /*查询所有积分活动*/
    selectEvent() {
      let url = 'http://localhost:8088/userIntegral/listOfAll'
      this.axios.get(url).then((response)=>{
        if (response.data.code===1){
          this.tableIntegralData = response.data.data;
        } else this.$message.error("服务异常")
      })
    },
    /*删除用户*/
    deleteUserById(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url='http://localhost:8088/user/delete/'
        this.axios.delete(url+id).then( (response)=>{
          if (response.data.code===1){
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.selectAllUser();
          }
        })
      }).catch(() => {
      });
    },
    /*删除博客*/
    deleteBlogById(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = 'http://localhost:8088/blog/deleteBlog/'
        this.axios.delete(url+id).then( (response)=>{
          if (response.data.code===1){
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.selectAllBlog();
          }
        })
      }).catch(() => {
      });
    },
    /*按照博客ID查询所有评论*/
    selectAllReplyByBlogId(id){
      this.dialogTableVisible = true;
      let url = 'http://localhost:8088/blogReply/selectAllReplyByBlogId/'
      this.axios.get(url+id).then((response)=>{
        if (response.data.code===1){
          this.tableReplyData = response.data.data;
        }
      })
    },
    /*按id删除评论*/
    deleteReplyById(reply){
      this.$confirm('此操作将删除该评论及其所有子评论, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        let url = 'http://localhost:8088/blogReply/delete/'
        this.axios.post(url+reply.id).then((response)=>{
          if (response.data.code===1){
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.selectAllReplyByBlogId(reply.blogId);
          }
        })
      }).catch(() => {
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    selectBlogByKeyword(keyword){
      alert(keyword)
    },

    /*查询所有博客*/
    selectAllBlog(){
      let url = 'http://localhost:8088/blog/selectAllBlog'
      this.axios.get(url).then((response)=>{
        if (response.data.code===1){
          this.tableBlogData =response.data.data;
        }
        else this.$message.error("服务异常");
      })

    },
    /*查询用户，进入个人主页*/
    selectUserById(id){
      alert(id)
    },
    selectUserByKeyword(keyword){
      alert(keyword);
      location.reload();
    },
    /*按照Id查询博客*/
    selectBlogById(id){
      alert(id)
    },
    /*查询所有用户*/
    selectAllUser(){
      let url = 'http://localhost:8088/user/list'
      this.axios.get(url).then( (response)=>{
        if (response.data.code===1){
          this.tableUserData =response.data.data.list;
        }else{
          alert(response.data.code)
        }
      })
    }
  },
  created:{

  }
}
</script>
<style>
.h4 {
  margin-top: -20px;
  margin-bottom:-35px;
  font-size: 10px;
}
.j1{
  padding-left: 500px;
  font-size: 10px;
}
.span1{
  padding-left: 200px;
}
.span2{
  padding-left: 240px;
}
</style>
